<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title> - 数据表格</title>
    <meta name="keywords" content="">
    <meta name="description" content="">

    <link rel="shortcut icon" href="favicon.ico">
    <link href="css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="css/font-awesome.css?v=4.4.0" rel="stylesheet">

    <!-- Data Tables -->
    <link href="css/plugins/dataTables/dataTables.bootstrap.css" rel="stylesheet">

    <link href="css/animate.css" rel="stylesheet">
    <link href="css/style.css?v=4.1.0" rel="stylesheet">
    <link rel="stylesheet" href="css/plugins/jQueryUI/jquery-ui-1.10.4.custom.min.css">

</head>
<style>
    label, input {
        display: block;
    }

    input.text {
        margin-bottom: 12px;
        width: 95%;
        padding: .4em;
    }

    fieldset {
        padding: 0;
        border: 0;
        margin-top: 25px;
    }

    h1 {
        font-size: 1.2em;
        margin: .6em 0;
    }

    div#users-contain table {
        margin: 1em 0;
        border-collapse: collapse;
        width: 100%;
    }

    div#users-contain table td, div#users-contain table th {
        border: 1px solid #eee;
        padding: .6em 10px;
        text-align: left;
    }

    .ui-dialog .ui-state-error {
        padding: .3em;
    }

    .ui-dialog-buttonset button {
        float: right;
        margin-left: 6px;
    }

    .ui-dialog-buttonpane {
        height: 30px;
    }

    .ui-dialog-titlebar-close {
        float: right;
    }

    #project-client-dialog {
        height: 600px !important;
        overflow-y: auto;
        font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
        font-size: 13px !important;
    }
</style>

<body class="gray-bg">
<div id="project-client-dialog" style="display: none;">
    <input id="dialog-projectName" type="text" style="display: none;"/>
    <div class="wrapper wrapper-content animated fadeInRight">
        <div class="ibox float-e-margins">
            <div class="ibox-content">
                <table id="retryTaskGroupTable"
                       class="table table-striped table-bordered table-hover project-list">
                </table>
            </div>
        </div>
    </div>
</div>
<div id="add-dialog-form" style="display: none;">
    <fieldset>
        <label for="name">项目名称</label>
        <input type="text" name="name" id="name" value="" class="text ui-widget-content ui-corner-all">
        <label for="token">TOKEN</label>
        <input type="text" name="token" id="token"
               class="text ui-widget-content ui-corner-all">
        <input type="text" id="projectId" style="display: none;">
    </fieldset>
</div>
<div id="edit-dialog-form" style="display: none;">
    <fieldset>
        <label for="name">项目名称</label>
        <input type="text" name="name" id="name" value="" class="text ui-widget-content ui-corner-all">
        <label for="token">TOKEN</label>
        <input type="text" name="token" id="token"
               class="text ui-widget-content ui-corner-all">
        <input type="text" id="projectId" style="display: none;">
    </fieldset>
</div>
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="layui-inline layui-show-xs-block" style="margin-bottom: 10px;">
        <button class="layui-btn" lay-submit="" id="add"><i class="layui-icon">添加</i></button>
    </div>
    <div class="row">

        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-content">
                    <div class="layui-inline layui-show-xs-block" style="margin-bottom: 10px;">
                        <input type="text" id="projectName" placeholder="请输入项目名称" autocomplete="off"
                               class="layui-input"
                               style="width: 15%;display: block;float: left;margin-right: 10px;">
                        <button class="layui-btn" lay-submit="" id="sreach"><i class="layui-icon">查找</i></button>
                    </div>
                    <table id="projectTable" class="table table-striped table-bordered table-hover project-list">
                    </table>

                </div>
            </div>
        </div>
    </div>

</div>

<!-- 全局js -->
<script src="js/jquery.min.js?v=2.1.4"></script>
<script src="js/bootstrap.min.js?v=3.3.6"></script>

<script src="js/plugins"></script>
<!-- Data Tables -->
<script src="js/plugins/dataTables/jquery.dataTables.js"></script>
<script src="js/plugins/dataTables/dataTables.bootstrap.js"></script>
<script src="js/jquery-ui-1.10.4.min.js"/>
<!-- 自定义js -->
<script src="js/content.js?v=1.0.0"></script>

<script>
    let projectTable;
    let retryTaskGroupTable;
    let dialog;
    let editDialog;
    let checkProjectDialog;
    $(document).ready(function () {
        initTable();
        initProjectClientTable();
        projectTable = $('#projectTable').dataTable();
        retryTaskGroupTable = $('#retryTaskGroupTable').dataTable();
    });

    $("#sreach").click(function () {
        initTable();
    });
    checkProjectDialog = $("#project-client-dialog").dialog({
        autoOpen: false,
        height: "600px",
        width: "89%",
        modal: true,
        title: "查看项目执行机器",
        closeText: "X",
        buttons: []
    });
    dialog = $("#add-dialog-form").dialog({
        autoOpen: false,
        height: 350,
        width: 350,
        modal: true,
        title: "创建项目",
        closeText: "X",
        buttons: [{
            text: "创建",
            click: addProject,
            right: 0
        }, {
            text: "取消",
            click: function () {
                $(this).dialog("close");
            },
            right: 0
        }]
    });
    editDialog = $("#edit-dialog-form").dialog({
        autoOpen: false,
        height: 350,
        width: 350,
        modal: true,
        title: "编辑项目",
        closeText: "X",
        buttons: [{
            text: "确认",
            click: doEditProject,
            right: 0
        }, {
            text: "取消",
            click: function () {
                $(this).dialog("close");
            },
            right: 0
        }]
    });

    function addProject() {
        var name = $("#add-dialog-form #name").val();
        var token = $("#add-dialog-form #token").val();
        if (name == null || name == '' || name == undefined) {
            alert("name is not right");
            return;
        }
        if (token == null || token == '' || token == undefined) {
            alert("token is not right");
            return;
        }
        var param = {};
        param["projectName"] = name;
        param["token"] = token;
        var url = "/retrytask/project/register";
        $.ajax({
            url: url,
            type: "POST",
            data: JSON.stringify(param),
            dataType: "json",
            contentType: "application/json",
            success: function (result) {
                if (result == null) {
                    return;
                }
                if (result.code == '-999') {
                    return;
                }
                var sucess = result.isSuccess;
                if (sucess == false) {
                    alert(result.errMsg);
                    return;
                }
                initTable();
                dialog.dialog("close");
            },
            error: function (err) {
                console.log(err.statusText);
                console.log('异常');
            },
            complete: function (XMLHttpRequest, textStatus) {
                var redirect = XMLHttpRequest.getResponseHeader("Redirect");
                if (redirect == "true") {
                    window.parent.location.href = XMLHttpRequest.getResponseHeader("RedirectUrl");
                }
            }
        });
    }

    $("#add").click(function () {
        $("#add-dialog-form #name").val("");
        $("#add-dialog-form #token").val("");
        $("#add-dialog-form #name").attr("disabled", false);
        dialog.dialog("open");
    });

    function loadProject(data, callback, settings) {
        let pageNum = (data.start / data.length) + 1;
        let pageSize = data.length;


        var url = "/retrytask/project/queryRetryTaskProject?pageNum=" + pageNum + "&pageSize=" + pageSize;
        var projectName = $("#projectName").val();
        if (projectName != null && projectName != '' && projectName != undefined) {
            url = url + "&projectName=" + projectName;
        }
        $.ajax({
            url: url,
            type: "GET",
            data: {},
            dataType: "json",
            success: function (result) {
                if (result == null) {
                    return;
                }
                if (result.code == '-999') {
                    return;
                }
                var sucess = result.isSuccess;
                if (sucess == false) {
                    alert(result.errMsg);
                    result;
                }
                let dataArr = [];
                var returnData = {};
                if(result.data!=null){
                    var size = result.data.length;
                    for (var i = 0; i < size; i++) {
                        var obj = result.data[i];
                        var token = obj["token"];
                        var projectName = obj["projectName"];
                        var projectId = obj["id"];
                        obj["operate"] = "<td class='td-manage'>" +
                            "<a title='编辑' token=" + token + " projectId = " + projectId + " projectName=" + projectName + "  onclick='editProject(this)' href='javascript:;' style='padding-right: 10%;'>" +
                            "<i class='layui-icon'>编辑</i>" +
                            "</a>" +
                            "<a title='删除' token=" + token + " projectId = " + projectId + " projectName=" + projectName + "   onclick='deleteProject(this)' href='javascript:;' style='padding-right: 10%;'>" +
                            "<i class='layui-icon'>删除</i>" +
                            "</a>" +
                            "<a title='查看对应机器' token=" + token + " projectId = " + projectId + " projectName=" + projectName + "   onclick='checkClientList(this)' href='javascript:;'>" +
                            "<i class='layui-icon'>查看对应机器</i>" +
                            "</a>" +
                            "</td>";
                        dataArr.push(obj);
                    }
                }

                returnData.draw = data.draw;//这里直接自行返回了draw计数器,应该由后台返回
                returnData.recordsTotal = result.totalCount;
                returnData.recordsFiltered = result.totalCount;//后台不实现过滤功能，每次查询均视作全部结果
                returnData.data = dataArr;
                callback(returnData);
            },
            error: function (err) {
                console.log(err.statusText);
                console.log('异常');
            },
            complete: function (XMLHttpRequest, textStatus) {
                var redirect = XMLHttpRequest.getResponseHeader("Redirect");
                if (redirect == "true") {
                    window.parent.location.href = XMLHttpRequest.getResponseHeader("RedirectUrl");
                }
            }
        })
    }

    function doEditProject(e) {
        var id = $("#edit-dialog-form #projectId").val();
        var token = $("#edit-dialog-form #token").val();
        if (token == null || token == '' || token == undefined) {
            alert("token is not right");
            return;
        }
        var flag = confirm("是否确认修改");
        if (flag == false) {
            return;
        }
        var param = {};
        param["token"] = token;
        param["id"] = id;
        var url = "/retrytask/project/update";
        $.ajax({
            url: url,
            type: "POST",
            data: JSON.stringify(param),
            dataType: "json",
            contentType: "application/json",
            success: function (result) {
                if (result == null) {
                    return;
                }
                if (result.code == '-999') {
                    return;
                }
                var sucess = result.isSuccess;
                if (sucess == false) {
                    alert(result.errMsg);
                    result;
                }
                initTable();
                editDialog.dialog("close");
            },
            error: function (err) {
                console.log(err.statusText);
                console.log('异常');
            },
            complete: function (XMLHttpRequest, textStatus) {
                var redirect = XMLHttpRequest.getResponseHeader("Redirect");
                if (redirect == "true") {
                    window.parent.location.href = XMLHttpRequest.getResponseHeader("RedirectUrl");
                }
            }
        });
    }

    function editProject(e) {
        var id = $(e).attr("projectId");
        var projectName = $(e).attr("projectName");
        var token = $(e).attr("token");

        $("#edit-dialog-form #name").val(projectName);
        $("#edit-dialog-form #token").val(token);
        $("#edit-dialog-form #projectId").val(id);
        $("#edit-dialog-form #name").attr("disabled", true);
        editDialog.dialog("open");

    }


    function checkClientList(e) {
        var projectName = $(e).attr("projectName");
        $("#dialog-projectName").val(projectName);
        checkProjectDialog.dialog("open");
        initProjectClientTable();
    }

    function deleteProject(e) {
        var id = $(e).attr("projectId");
        var flag = confirm("是否确认删除?");
        if (flag == false) {
            return;
        }
        var url = "/retrytask/project/delete?id=" + id;
        $.ajax({
            url: url,
            type: "GET",
            dataType: "json",
            contentType: "application/json",
            success: function (result) {
                if (result == null) {
                    return;
                }
                if (result.code == '-999') {
                    return;
                }
                var sucess = result.isSuccess;
                if (sucess == false) {
                    alert(result.errMsg);
                    result;
                }
                initTable();
                editDialog.dialog("close");
            },
            error: function (err) {
                console.log(err.statusText);
                console.log('异常');
            },
            complete: function (XMLHttpRequest, textStatus) {
                var redirect = XMLHttpRequest.getResponseHeader("Redirect");
                if (redirect == "true") {
                    window.parent.location.href = XMLHttpRequest.getResponseHeader("RedirectUrl");
                }
            }
        });
    }

    function loadRetryTaskGroup(data, callback, settings) {
        let pageNum = (data.start / data.length) + 1;
        let pageSize = data.length;
        var projectName = $("#dialog-projectName").val();
        if (projectName == null || projectName == "" || projectName == undefined) {
            return;
        }
        var url = "/retrytask/project/queryRetryTaskGroup?pageNum=" + pageNum + "&pageSize=" + pageSize + "&projectName=" + projectName;
        $.ajax({
            url: url,
            type: "GET",
            data: {},
            dataType: "json",
            success: function (result) {
                if (result == null) {
                    return;
                }
                if (result.code == '-999') {
                    return;
                }
                var sucess = result.isSuccess;
                if (sucess == false) {
                    alert(result.errMsg);
                    result;
                }
                let dataArr = [];
                var returnData = {};
                if(result.data!=null){
                    var size = result.data.length;
                    for (var i = 0; i < size; i++) {
                        var obj = result.data[i];
                        dataArr.push(obj);
                    }
                }
                //returnData.draw = data.draw;//这里直接自行返回了draw计数器,应该由后台返回
                returnData.recordsTotal = result.totalCount;
                returnData.recordsFiltered = result.totalCount;//后台不实现过滤功能，每次查询均视作全部结果
                returnData.data = dataArr;
                callback(returnData);
            },
            error: function (err) {
                console.log(err.statusText);
                console.log('异常');
            },
            complete: function (XMLHttpRequest, textStatus) {
                var redirect = XMLHttpRequest.getResponseHeader("Redirect");
                if (redirect == "true") {
                    window.parent.location.href = XMLHttpRequest.getResponseHeader("RedirectUrl");
                }
            }
        })
    }

    function initProjectClientTable() {
        let columns = [
            {"data": "projectName", "orderable": false, "title": "项目名称", "width": "150px"},
            {"data": "executeIp", "orderable": false, "title": "执行机器ip", "width": "150px"},
            {"data": "gmtCreate", "orderable": false, "title": "创建时间", "width": "80px"},
            {"data": "gmtModified", "orderable": false, "title": "修改时间", "width": "80px"},
            {"data": "heartTime", "orderable": false, "title": "上次心跳时间", "width": "80px"},
            {"data": "heartTick", "orderable": false, "title": "心跳次数", "width": "80px"},
            {"data": "statusName", "orderable": false, "title": "执行状态", "width": "80px"},
        ];
        return $('#retryTaskGroupTable').dataTable({
            paging: true,
            pageLength: 10,
            iLeftColumns: 4,  //开启左侧两列固定
            bLengthChange: false,
            "bFilter": false,
            "destroy": true,
            "bPaginate": true,
            "pagingType": "full_numbers",
            serverSide: true,
            ajax: function (data, callback, settings) {
                loadRetryTaskGroup(data, callback, settings);
            },
            "oLanguage": { //国际化配置
                "sProcessing": "正在获取数据，请稍后...",
                "sLengthMenu": "显示 _MENU_ 条",
                "sZeroRecords": "没有您要搜索的内容",
                "sInfo": "从 _START_ 到  _END_ 条记录 总记录数为 _TOTAL_ 条",
                "sInfoEmpty": "记录数为0",
                "sInfoFiltered": "(全部记录数 _MAX_ 条)",
                "sInfoPostFix": "",
                "sSearch": "搜索",
                "sUrl": "",
                "oPaginate": {
                    "sFirst": "第一页",
                    "sPrevious": "上一页",
                    "sNext": "下一页",
                    "sLast": "最后一页"
                }
            },
            columns: columns
        });
    }

    function initTable() {
        let columns = [
            {"data": "id", "title": "id"},
            {"data": "projectName", "title": "项目名称"},
            {"data": "token", "title": "token"},
            {"data": "gmtCreate", "title": "创建时间"},
            {"data": "gmtModified", "title": "修改时间"},
            {"data": "operate", "title": "操作"},
        ];
        return $('#projectTable').dataTable({
            paging: true,
            pageLength: 15,
            bLengthChange: false,
            "bFilter": false,
            "destroy": true,
            "bPaginate": true,
            "pagingType": "full_numbers",
            serverSide: true,
            ajax: function (data, callback, settings) {
                loadProject(data, callback, settings);
            },
            "oLanguage": { //国际化配置
                "sProcessing": "正在获取数据，请稍后...",
                "sLengthMenu": "显示 _MENU_ 条",
                "sZeroRecords": "没有您要搜索的内容",
                "sInfo": "从 _START_ 到  _END_ 条记录 总记录数为 _TOTAL_ 条",
                "sInfoEmpty": "记录数为0",
                "sInfoFiltered": "(全部记录数 _MAX_ 条)",
                "sInfoPostFix": "",
                "sSearch": "搜索",
                "sUrl": "",
                "oPaginate": {
                    "sFirst": "第一页",
                    "sPrevious": "上一页",
                    "sNext": "下一页",
                    "sLast": "最后一页"
                }
            },
            columns: columns
        });
    }
</script>


</body>

</html>
